<template>
  <div class="config-scene p-6 max-w-2xl mx-auto">
    <div class="text-center mb-8">
      <h2 class="text-2xl font-bold text-gray-900 mb-2">配置您的对话</h2>
      <p class="text-gray-600">请填写以下信息以开始对话</p>
    </div>

    <form @submit.prevent="handleSubmit" class="space-y-6">
      <div v-for="variable in promptConfig?.prompt_variables || []" :key="variable.key" class="form-group">
        <label :for="variable.key" class="block text-sm font-medium text-gray-700 mb-2">
          {{ variable.name }}
          <span v-if="variable.required" class="text-red-500">*</span>
        </label>
        
        <input
          v-if="variable.type === 'text'"
          :id="variable.key"
          v-model="formInputs[variable.key]"
          type="text"
          :required="variable.required"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        />
        
        <textarea
          v-else-if="variable.type === 'paragraph'"
          :id="variable.key"
          v-model="formInputs[variable.key]"
          :required="variable.required"
          rows="4"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        />
        
        <select
          v-else-if="variable.type === 'select'"
          :id="variable.key"
          v-model="formInputs[variable.key]"
          :required="variable.required"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        >
          <option value="">请选择...</option>
          <option v-for="option in variable.options" :key="option" :value="option">
            {{ option }}
          </option>
        </select>
      </div>

      <div class="flex justify-center">
        <button
          type="submit"
          class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200"
        >
          开始对话
        </button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import type { PromptConfig } from '@/types/app'

interface Props {
  promptConfig: PromptConfig | null
  inputs: Record<string, any>
}

const props = defineProps<Props>()

const emit = defineEmits<{
  startChat: [inputs: Record<string, any>]
}>()

const formInputs = reactive<Record<string, any>>({ ...props.inputs })

const handleSubmit = () => {
  emit('startChat', formInputs)
}
</script>

<style scoped>
.config-scene {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-group {
  margin-bottom: 1.5rem;
}
</style> 